const svg = d3.select('svg');

const width = +svg.attr('width');
const height = +svg.attr('height');

const render = data => {
  const title = '一周内气温变化';
  const xValue = d => d.date;
  const yValue = d => d.max;
  const y2Value = d => d.min;
  const margin = { top: 80, bottom: 30, left: 100, right: 20};
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;
  
  const circleRadius = 5;
  
  const xScale = d3.scalePoint()
    .domain(data.map(xValue))
	.range([0, innerWidth])
	.padding(0.2);//轴间距
  
  const yScale =  d3.scaleLinear()
    .domain([d3.max(data, yValue), d3.min(data, y2Value)])
	.range([0, innerHeight])
	.nice();
	
  const g = svg.append('g')
    .attr('class', 'g1')
    .attr('transform',`translate(${margin.left},${margin.bottom})`);
  const g2 = svg.append('g')
    .attr('class', 'g2')
    .attr('transform',`translate(${margin.left},${margin.bottom})`);
  
  const yAxis = d3.axisLeft(yScale)
    .tickSize(-innerWidth);
  
  const yAxisGroup = g.append('g').call(yAxis);
  yAxisGroup.selectAll('.domain').remove();
  yAxisGroup.append('text')
    .attr('fill', 'black')
    .attr('x', 0)
	.attr('y', -10)
	.text('气温(℃)');
  
  //格式化x轴数据
  //const xAxisFormat = number => number == 0 ? 0 : number/10000 + '万';
  const xAxis = d3.axisBottom(xScale);
    //.tickFormat(xAxisFormat)
	//添加网格线
	//.tickSize(-innerHeight);
 
  const xAxisGroup = g.append('g').call(xAxis)
    .attr('transform',`translate(0, ${innerHeight})`);
  //去除x轴轴线
  xAxisGroup.selectAll('.domain').remove();
  //添加x轴名称
  xAxisGroup.append('text')
    .attr('fill', 'black')
    .attr('y', 40)
	.attr('x', innerWidth/2);
	//.text('人口（万）');
  
  const dataSet = d3.line()
    .x(d => xScale(d.date) + margin.left)
	.y(d => yScale(d.max) + margin.bottom);
  
  //添加折线
  svg.append('g')
    .attr('class', 'lines')
	.append('path')
	.attr('d', dataSet(data))
	.attr('stroke', 'steelblue') //颜色
	.attr('fill', 'none')
	.attr('stroke-width', '2')
	.attr('stroke-linejoin', 'round');
  
  const dataSet2 = d3.line()
    .x(d => xScale(d.date) + margin.left)
	.y(d => yScale(d.min) + margin.bottom);
  
  svg.append('g')
    .attr('class', 'lines')
	.append('path')
	.attr('d', dataSet2(data))
	.attr('stroke', 'orange') //颜色
	.attr('fill', 'none')
	.attr('stroke-width', '2')
	.attr('stroke-linejoin', 'round');
  
  g.selectAll('circle').data(data)
    .enter().append('circle')
      .attr('cy', d => yScale(yValue(d)))
      .attr('cx', d => xScale(xValue(d)))
      .attr('r', circleRadius)
	  .append('title')
	  .text(function(d){
	    return `${d.date}最高气温 : ${d.max} `
      });
  
  
  g2.selectAll('circle').data(data)
    .enter().append('circle')
      .attr('cy', d => yScale(y2Value(d)))
      .attr('cx', d => xScale(xValue(d)))
      .attr('r', circleRadius)
	  .append('title')
	  .text(function(d){
	    return `${d.date}最低气温 : ${d.min} `
      });
	  
  g.append('text')
    .attr('y', -10)
	.attr('x',innerWidth/3)
	.text(title);
}

d3.csv('data.csv').then( data => {
  data.forEach(d => {
	d.max = +d.max;
	d.min = +d.min;
  });
  render(data);
});